<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>π付系统 </title>
    <link href="/statics/css/bootstrap.min.css" rel="stylesheet">
    <link href="/statics/css/common.css" rel="stylesheet">
    <link href="/statics/css/user_order.css" rel="stylesheet">
</head>
<body>
<div class="nav">
    <img id="go_back" src="/statics/images/go_back_black.png" alt="返回">
    <div>我的订单</div>
</div>

<div class="container">
    <!--普通 、 白金 、 钻石-->
    <div class="row recharge_status">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span class="active">普通项目</span></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span>黄金项目</span></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span>白金项目</span></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span>钻石项目</span></div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center"><span>口腔项目</span></div>
    </div>

    <div id="select_project">
        <div class="clearfix">
            <div class="pull-left active">项目</div>
            <div class="pull-left">商品</div>
            <div class="pull-left">体验券</div>
        </div>
        <div style="height: 0.26666rem;background-color: #f2f2f2"></div>
    </div>

    <!--订单列表 普通-->
    <div class="order_list recharge_status_general active" id="recharge_status_general"></div>

    <!--jollyone商品-->
    <div class="order_list recharge_status_general_jollyone " id="jollyone_general"></div>

    <!--体验券-->
    <div class="order_list recharge_status_general_experience " id="experience_general"></div>

    <!--订单列表 黄金-->
    <div class="order_list recharge_status_gold" id="recharge_status_gold"></div>

    <!--订单列表 白金-->
    <div class="order_list recharge_status_platina" id="recharge_status_platina"></div>

    <!--订单列表 钻石-->
    <div class="order_list recharge_status_jewel" id="recharge_status_jewel"></div>

    <!--订单列表 口腔-->
    <div class="order_list recharge_status_mouth" id="recharge_status_mouth"></div>

</div>

<!--查看详情modal  开始-->
<div id="detail_modal" class="detail_modal modal_define">
    <ul>
        <li class="title text-center">
            <div>查看详情</div>
            <img class="modal_close" src="/statics/images/close.png" alt="">
        </li>
        <li>
            <div class="clearfix">
                <div class="pull-left"><span class="letter_space">姓</span>名：</div>
                <div class="pull-left detail_modal_name">木木</div>
            </div>
        </li>
        <li>
            <div class="clearfix">
                <div class="pull-left">手机号：</div>
                <div class="pull-left detail_modal_phone">15566668888</div>
            </div>
        </li>
        <li>
            <div class="clearfix">
                <div class="pull-left">消费时间：</div>
                <div class="pull-left detail_modal_time">2017年12月11号</div>
            </div>
        </li>
    </ul>
</div>
<!--查看详情modal  结束-->

<!--立即消费modal  开始-->
<div id="consume_modal" class="consume_modal modal_define">
    <form action="" method="post" id="consume_modal_form">
        <ul>
            <li class="title text-center">
                <div>立即消费</div>
                <img class="modal_close" src="/statics/images/close.png" alt="">
            </li>
            <li>
                <div class="clearfix">
                    <div class="pull-left"><span class="letter_space_2">课</span>室：</div>
                    <div class="pull-left"><input type="text" name="class_room" placeholder="输入课室"></div>
                </div>
            </li>
            <li>
                <div class="clearfix">
                    <div class="pull-left"><span class="letter_space_0_5">服</span><span
                            class="letter_space_0_5">务</span>商：
                    </div>
                    <div class="pull-left"><input type="text" name="servicer" placeholder="输入服务商"></div>
                </div>
            </li>
            <li>
                <div class="clearfix">
                    <div class="pull-left"><span class="letter_space_0_5">咨</span><span
                            class="letter_space_0_5">询</span>师：
                    </div>
                    <div class="pull-left"><input type="text" name="counselor" placeholder="输入咨询师"></div>
                </div>
            </li>
            <!--<li>
                <div class="clearfix">
                    <div class="pull-left">操作护士：</div>
                    <div class="pull-left"><input type="text" name="operate_nurse" placeholder="输入操作护士"></div>
                </div>
            </li>-->
            <li>
                <div class="clearfix">
                    <div class="pull-left">操作地点：</div>
                    <div class="pull-left"><input type="text" name="operate_place" placeholder="输入操作地点"></div>
                </div>
            </li>
            <li>
                <div class="clearfix">
                    <div class="pull-left"><span class="letter_space_2">姓</span>名：</div>
                    <div class="pull-left"><input type="text" name="consumer" placeholder="输入您的姓名"></div>
                </div>
            </li>
            <li>
                <div class="clearfix">
                    <div class="pull-left"><span class="letter_space_0_5">手</span><span
                            class="letter_space_0_5">机</span>号：
                    </div>
                    <div class="pull-left"><input type="text" name="consumer_mobile" placeholder="输入您的手机号"></div>
                </div>
            </li>
            <li>
                <div class="clearfix">
                    <div class="pull-left"><span class="letter_space_2">时</span>间：</div>
                    <div class="pull-left consume_modal_time">2017年12月11号</div>
                    <input type="text" name="order_id" value="" style="display: none;">
                </div>
            </li>
        </ul>
    </form>
    <div class="at_consume text-center">
        <div id="at_consume">立即消费</div>
    </div>
</div>
<!--立即消费modal  结束-->

<!--modal 背景遮罩层-->
<div id="mark"></div>
<!--modal 背景遮罩层-->

<!--消费成功  提示  模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                提交成功！
            </div>
            <div class="modal-footer">
                <div data-dismiss="modal">确定</div>
            </div>
        </div>
    </div>
</div>
<!--消费成功  提示  模态框-->

<!--取消订单  提示  模态框-->
<div class="modal fade" id="cancel_order" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                确定取消订单吗？
            </div>
            <div class="modal-footer">
                <div data-dismiss="modal">确定</div>
            </div>
        </div>
    </div>
</div>
<!--取消订单  提示  模态框-->

<!--套餐内容  提示  模态框-->
<div class="modal fade" id="modal_meal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="clearfix">
                    <div class="pull-left">套餐内容</div>
                    <div class="pull-right"><img data-dismiss="modal" src="/statics/images/close.png" alt=""></div>
                </div>
                <div id="select_meal">
                    <!--内容列表-->
                </div>
                <div class="text-center">
                    <div id="sure_next">下一步</div>
                </div>
                <div id="deal_form" style="display: none;">
                    <form action="" id="deal_form_input">
                        <table>
                            <tr>
                                <td>操作护士：</td>
                                <td><input type="text" name="operate_nurse" placeholder="请输入操作护士"></td>
                            </tr>
                            <tr>
                                <td>操作医生：</td>
                                <td><input type="text" name="operate_doctor" placeholder="请输入操作医生"></td>
                            </tr>
                            <tr>
                                <td><span style="letter-spacing: 0.5em;">操</span><span style="letter-spacing: 0.5em;">作</span>地：</td>
                                <td><input type="text" name="operate_place" placeholder="请输入操作地点"></td>
                            </tr>
                        </table>
                    </form>
                    <div class="text-center" style="padding-bottom: 0.4rem;">
                        <div id="sure_consume">确认消耗</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--套餐内容  提示  模态框-->

<!--确认收货  提示  模态框-->
<div class="modal fade" id="sure_teak_goods" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                请您确认收货！
            </div>
            <div class="modal-footer">
                <div data-dismiss="modal">确定</div>
            </div>
        </div>
    </div>
</div>
<!--确认收货  提示  模态框-->

<script src="/statics/js/jquery-3.2.1.min.js"></script>
<script src="/statics/js/bootstrap.min.js"></script>
<script src="/statics/js/user_order.js"></script>
<script src="/statics/js/flexible.js"></script>
</body>
</html>